<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>我的项目圈-新建项目</title>
		<link rel="stylesheet" type="text/css" href="../css/vue.css"/>
		<link rel="stylesheet" type="text/css" href="../css/common.css"/>
		<link rel="stylesheet" type="text/css" href="../css/myProject.css"/>
	</head>
	<body>
		<!--公共头部 start-->
		<div class="commonHead">
			<div class="commonHeadLeft">
				<a href="javascript:void(0);"><img src="../img/indexLogo.png" class="houseLogo"/></a>
			</div>
			<div class="commonHeadCenter">
				<ul>
					<li>
						<a class="active">项目圈</a>
					</li>
					<li>
						<a>材料数据库</a>
					</li>
					<li>
						<a>计算工具</a>
					</li>
					<li class="clear"></li>
				</ul>
			</div>
			<div class="commonHeadRight">
				<div class="infoCenter">
					<span class="iconfont-tcl">&#xe643;</span>
					<span class="infoCenterText">消息中心</span>
					<span class="remindCircle"></span>
				</div>
				<div class="loginInfo">
					<el-dropdown trigger="click">
						<span class="el-dropdown-link">
						    Kdd<i class="el-icon-caret-bottom el-icon--right"></i>
						</span>
						<el-dropdown-menu slot="dropdown">
						    <el-dropdown-item>账号设置</el-dropdown-item>
						    <el-dropdown-item>退出</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
				<div class="clear"></div>
			</div>
			<div class="clear"></div>
		</div>
		<!--公共头部 end-->
		
		<!--公共侧边栏 start-->
		<div class="commonSide">
			<div class="sideTitle">项目圈</div>
			<ul class="sideMenu">
				<li class="active">
					<a href="javascript:void(0);">
						<span class="iconfont">&#xe611;</span>
						<span>我的项目</span>
					</a>
				</li>
				<li>
					<a href="javascript:void(0);">
						<span class="iconfont">&#xe60e;</span>
						<span>我的材料库</span>
					</a>
				</li>
				<li>
					<a href="javascript:void(0);">
						<span class="iconfont">&#xe610;</span>
						<span>我的收藏</span>
					</a>
				</li>
			</ul>
		</div>
		<!--公共侧边栏 end-->
		
		<!--内容 start-->
		<div class="content">
			<div class="contentTop">
				<a class="contentBack">
					<span class="iconfont">&#xe60a;</span>
					<span class="backText">返回</span>
				</a>
				<span class="contentSever">|</span>
				<div class="contentTitle">新建项目</div>
				<div class="help">
					<a href="javascript:void(0)">
						<span class="iconfont">&#xe60c;</span>
						<span>技术支持</span>						
					</a>
				</div>
				<div class="clear"></div>
			</div>
			
			<!--项目圈内容 start-->
			<div class="myProject">	
				<div class="projectBox">	
					
					<!--buildNewProject start-->
					<div class="buildNewProject">
						<div class="newProjectForm">
							<div class="selectBox">
								<label>地区</label>
								<div class="shortSelect">
									<template>
										<el-select placeholder="省" v-model="province">
										    <el-option
										      	v-for="province in provinces"
										      	:label="province.label"
										      	:value="province.value"
										        :key="province">
										    </el-option>
										</el-select>
									</template>
								</div>
								<div class="shortSelect">
									<template>
										<el-select placeholder="市"  v-model="city">
										    <el-option
										      v-for="city in cities"
										      :label="city.label"
										      :value="city.value"
										      :key="city">
										    </el-option>
										</el-select>
									</template>
								</div>
								<div class="clear"></div>
							</div>
							<div class="inputBox">
								<label>项目名称</label>
								<div class="longInput">
									<input type="text" placeholder="30个字以内"/>
								</div>
								<div class="clear"></div>
							</div>
							<div class="inputBox">
								<label>项目地址</label>
								<div class="longInput">
									<input type="text" placeholder="50个字以内"/>
								</div>
								<div class="clear"></div>
							</div>
							<div class="selectBox">
								<label>建筑类型</label>
								<div class="longSelect">
									<template>
										<el-select placeholder="选择建筑类型" v-model="buildingType">
										    <el-option
										      v-for="buildingType in buildingTypes"
										      :label="buildingType.label"
										      :value="buildingType.value"
										      :key="buildingType">
										    </el-option>
										</el-select>
									</template>
								</div>
								<div class="clear"></div>
							</div>
							<div class="inputBox">
								<label>建筑面积</label>
								<div class="shortInput">
									<input type="text"/>
								</div>
								<span class="fl">m²</span>
								<div class="clear"></div>
							</div>
							<div class="inputBox">
								<label>建筑层高</label>
								<div class="shortInput">
									<input type="text"/>
								</div>
								<span class="fl">m²</span>
								<div class="clear"></div>
							</div>
							<div class="selectBox">
								<label>项目周期</label>
								<div class="dateDuringPicker">
									<template>
										<div class="block">
										    <el-date-picker
										      v-model="datePickerText"
										      type="daterange"
										      placeholder="请选择项目起止日期">
										    </el-date-picker>
										</div>
									</template>
								</div>
								<div class="clear"></div>
							</div>
							<div class="selectBox">
								<label>交付状态</label>
								<div class="longSelect">
									<template>
										<el-select placeholder="硬装交付" v-model="pay">
										    <el-option
										      v-for="pay in pays"
										      :label="pay.label"
										      :value="pay.value"
										      :key="pay">
										    </el-option>
										</el-select>
									</template>
								</div>
								<div class="clear"></div>
							</div>
							<div class="selectBox">
								<label>标准依据</label>
								<div class="longSelect">
									<template>
										<el-select placeholder="住宅建筑室内装修污染控制技术规程" v-model="normal">
										    <el-option
										      v-for="normal in normals"
										      :label="normal.label"
										      :value="normal.value"
										      :key="normal">
										    </el-option>
										</el-select>
									</template>
								</div>
								<div class="clear"></div>
							</div>
							
							<div class="inputGroup">
								<label>控制要求</label>
								<a class="controlLevel controlLevelActive">1级</a>
								<a class="controlLevel">2级</a>
								<a class="controlLevel controlLastLevel">3级</a>
								<a class="checkDetail">查看详细</a>
								<div class="clear"></div>
							</div>
						</div>
						<button class="openProject greenLargerBtn">开启项目</button>
					</div>
					<!--buildNewProject end-->
					
				</div>
				
			</div>
			<!--项目圈内容 end-->
		</div>
		<!--内容 end-->
		
	</body>
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript" src="../js/vueComponent.js"></script>
	<script type="text/javascript" src="../js/component.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			//获取content最小高度
			var contentMinHeight = $(window).innerHeight() - 60;
			$('.content').css('min-height',contentMinHeight + 'px');
			//获取content宽度
			var contentWidth = $(window).innerWidth() - 180;
			$('.content').css('width',contentWidth + 'px');
			
			//控制要求级数选择
			$('.controlLevel').each(function(index){
				$(this).click(function(){
					$('.controlLevel').removeClass('controlLevelActive').eq(index).addClass('controlLevelActive');
				});
			});
		});
		new Vue({
			el:'.loginInfo'
		});
		
		new Vue({
			el:'.myProject',
			data:function(){
				return {
			        datePickerText: '',
					provinces: [{
			          value: '选项1',
			          label: '广东省'
			        }, {
			          value: '选项2',
			          label: '广西省'
			        }, {
			          value: '选项3',
			          label: '福建省'
			        }, {
			          value: '选项4',
			          label: '海南省'
			        }],
			        province:'',
					cities: [{
			          value: '选项1',
			          label: '广州市'
			        }, {
			          value: '选项2',
			          label: '深圳市'
			        }, {
			          value: '选项3',
			          label: '珠海市'
			        }, {
			          value: '选项4',
			          label: '佛山市'
			        }],
			        city:'',
			        buildingTypes: [{
			          value: '选项1',
			          label: 'A型'
			        }, {
			          value: '选项2',
			          label: 'B型'
			        }, {
			          value: '选项3',
			          label: 'C型'
			        }, {
			          value: '选项4',
			          label: 'D型'
			        }],
			        buildingType:'',
			        pays: [{
			          value: '选项1',
			          label: 'pay1'
			        }, {
			          value: '选项2',
			          label: 'pay2'
			        }, {
			          value: '选项3',
			          label: 'pay3'
			        }, {
			          value: '选项4',
			          label: 'pay4'
			        }],
			        pay:'',
			        normals: [{
			          value: '选项1',
			          label: 'normal1'
			        }, {
			          value: '选项2',
			          label: 'normal2'
			        }, {
			          value: '选项3',
			          label: 'normal3'
			        }, {
			          value: '选项4',
			          label: 'normal4'
			        }],
			        normal:'',
				}    
			}

		});
	</script>
</html>
